<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Online Chat</title>
  <!-- 引入公共样式 -->
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/index.css">
  <script src="../js/nav.js"></script>
  <style>
    

    .chat-container {
      background-color: #ffffff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      /* max-width: 400px; */
      width: 600px;
      text-align: center;
      margin: 0 auto;
      margin-top: 100px;
    }

    .chat-box {
      /* overflow-y: scroll; */
      /* max-height: 500px; */
      border: 1px solid #cccccc;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 10px;
      /* height: 400px; */
    }

    .message {
      margin-bottom: 10px;
      display: flex;
      align-items: flex-start;
    }

    .message img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .message span {
      font-weight: bold;
      color: #333333;
    }

    .message .content {
      background-color: #e6e6e6;
      padding: 8px;
      border-radius: 8px;
      max-width: 70%;
    }

    .message.user .content {
      background-color: #007BFF;
      color: #ffffff;
      align-self: flex-end;
    }

    .message.user {
      flex-direction: row-reverse;
      /* Reverse the direction for user messages */
      align-items: flex-end;
    }

    .input-group {
      display: flex;
    }

    .input-group input {
      flex: 1;
      padding: 8px;
      border: 1px solid #cccccc;
      border-radius: 4px;
    }

    .input-group button {
      background-color: #007BFF;
      color: #ffffff;
      padding: 8px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-left: 8px;
    }

    .input-group button:hover {
      background-color: #0056b3;
    }
  </style>
</head>

<body>
  <!-- 头部 -->
  <div class="header">
    <img src="../img/logo/logo.svg" alt="">
  </div>
  <!-- 导航栏 -->
  <div>
    <nav id="navbar">
      <div>
        <a href="./index.html" class="nav-item" onclick="highlightNavItem(this,event)">首页</a>
        <a href="./category.html" class="nav-item" onclick="highlightNavItem(this,event)">商品分类</a>
        <a href="./new.html" class="nav-item" onclick="highlightNavItem(this,event)">每月上新</a>
        <a href="./hot.html" class="nav-item" onclick="highlightNavItem(this,event)">热销推荐</a>
        <a href="./service.html" class="nav-item" onclick="highlightNavItem(this,event)">在线客服</a>
        <a href="./about.html" class="nav-item" onclick="highlightNavItem(this,event)">关于我们</a>
      </div>
      <div class="icons">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/sousuo.png" alt="搜索">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/jushoucang.png" alt="收藏">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/gouwuche.png" alt="购物车">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/gerenzhongxin.png" alt="个人中心">
      </div>
    </nav>
  </div>
<!-- 内容 -->
  <div class="chat-container">
    <div class="chat-box" id="chatBox">
      <!-- Initial greeting from customer service -->
      <div class="message">
        <img src="../img/service/active.jpg" alt="Customer Service Avatar">
        <div class="content">Hello! How can I assist you today?</div>
      </div>
    </div>

    <div class="input-group">
      <input type="text" id="messageInput" placeholder="Type your message...">
      <button  onclick="sendMessage()">Send</button>
    </div>
  </div>

  <script>

     // 添加监听Enter键的事件
      document.getElementById('messageInput').addEventListener('keyup', function (event) {
        if (event.key === 'Enter') {
          sendMessage();
        }
      });


    function sendMessage() {
      const messageInput = document.getElementById('messageInput');
      const chatBox = document.getElementById('chatBox');

      if (messageInput.value.trim() !== '') {
        // User message
        const userMessageDiv = document.createElement('div');
        userMessageDiv.classList.add('message', 'user');
        userMessageDiv.innerHTML = `
        <img src="../img/service/4.jpg" alt="User Avatar">
        <div class="content">${messageInput.value}</div>
      `;
        chatBox.appendChild(userMessageDiv);

        // Random customer service response
        const responses = ["I'm here to help!", "How can I assist you?", "Feel free to ask any questions."];
        const randomResponse = responses[Math.floor(Math.random() * responses.length)];

        const customerServiceMessageDiv = document.createElement('div');
        customerServiceMessageDiv.classList.add('message');
        customerServiceMessageDiv.innerHTML = `
        <img src="../img/service/active.jpg" alt="Customer Service Avatar">
        <div class="content">${randomResponse}</div>
      `;
        chatBox.appendChild(customerServiceMessageDiv);

        chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the bottom of the chat box
        messageInput.value = '';
      }
    }
  </script>

</body>

</html>